<template>
	<view class="p-b-80 m-b-80">
		<view class="position-retive w-750 h-460">
			<image src="https://www.shuyunpt.com/app/image/my/bg2.png" class="w-750 h-460"></image>
			<view class="position-fixed left-0 right-0 top-220 d-flex-items-center p-l-40 p-r-40 z-index-9">
				<image :src="avatar" class="w-120 h-120 head" @click="changeAvatar"></image>
				<view class="c-white m-l-30" @click="nickname ? changeNickname() : login()">
					<view class="f-36 m-b-20">{{nickname  ? nickname : '请登录'}}</view>
					<!-- <view>565543218@163.com</view> -->
				</view>
			</view>
			<view class="position-absolute left-0 right-0 top-370 p-l-40 p-r-40">
				<view class="w-670 bgc-white br-30 p-b-30">
					<view class="b-b h-80 d-flex-between d-flex-items-center p-r-30 p-l-30">
						<view class="c-33 font-weight-bold">我的订单</view>
						<view class="f-24 d-flex-items-center"  @click="orderClick(0)">
							<text class="m-r-10">全部</text> 
							<u-icon name="arrow-right" color="#333" size="24"></u-icon>
						</view>
					</view>
					<view class="d-flex-between p-l-40 p-r-40 p-t-30" >
						<view v-for="(item,index) in orderList" :key="index" @click="orderClick(item.type)">
							<image :src="item.image" class="w-105 h-105"></image>
							<view class="align-center f-24 m-t-10">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view class="w-670 bgc-white br-30 p-b-40 m-t-25">
					<view class=" d-flex-items-center p-r-30 p-l-30 p-t-25">
						<image src="https://www.shuyunpt.com/app/image/my/9.png" class="w-28 h-28 m-r-12"></image>
						<view class="c-33 font-weight-bold f-32">其他服务</view>
					</view>
					<view class="d-flex-between p-l-60 p-r-60 p-t-40">
						<view v-for="(item,index) in serviceList" :key="index" class="align-center"
						@click="pageGo(item.url)">
							<image :src="item.image" class="w-60 h-60 "></image>
							<view class="align-center f-24 m-t-16">{{item.text}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname:"",
				avatar:"https://www.shuyunpt.com/uploads/image/20250712/1752297731153208.png",
				orderList:[
					{
						image:'https://www.shuyunpt.com/app/image//my/1.png',
						text:"待支付",
						type:1
					},
					{
						image:'https://www.shuyunpt.com/app/image//my/2.png',
						text:"待施工",
						type:2
					},
					{
						image:'https://www.shuyunpt.com/app/image//my/3.png',
						text:"已完工",
						type:3
					},
					{
						image:'https://www.shuyunpt.com/app/image//my/4.png',
						text:"待评价",
						type:4
					}
				],
				serviceList:[
					{
						image:'https://www.shuyunpt.com/app/image//my/5.png',
						text:"地址管理",
						url:"/pages/address/address"
					},
					{
						image:'https://www.shuyunpt.com/app/image//my/6.png',
						text:"会话管理",
						url:"/pages/notice/index"
					},
					{
						image:'https://www.shuyunpt.com/app/image//my/7.png',
						text:"个人设置",
						url:"/pages/setting/index"
					},
					{
						image:'https://www.shuyunpt.com/app/image//my/8.png',
						text:"关于墅云",
						url:"/pages/login/agree?title=关于我们",
					}
				]
			};
		},
		onShow(){
			if(this.$store.state.loginStatic){
				this.getUserInfo()
			}
		},
		methods: {
			async getUserInfo(){
				const res = await this.$service({
					url:"/api/member.user/getUserInfo",
					method:"GET"
				})
				console.log(res);
				this.nickname = res.data.nickname
				this.avatar = res.data.avatar
				
				// 更新缓存中的昵称和头像
				if (res.data.nickname) {
					this.$store.commit('updateUserNickname', res.data.nickname)
				}
				if (res.data.avatar) {
					this.$store.commit('updateUserAvatar', res.data.avatar)
				}
			},
			orderClick(type){
				// 先发送事件，再跳转页面
				uni.$emit('orderType', type);
				uni.switchTab({
					url:"/pages/tabbar/order/index"
				})
			},
			pageGo(url){
				if(url== '/pages/notice/index')
				{
					uni.switchTab({
						url
					})
				}else{
					uni.navigateTo({
						url
					})
				}
				
			},
			login(){
				if(this.$store.state.loginStatic) return
				// 跳转到登录页面并记录来源
				const currentUrl = '/pages/tabbar/my/index';
				uni.navigateTo({
					url: `/pages/login/index?source_url=${encodeURIComponent(currentUrl)}&source_params=${encodeURIComponent(JSON.stringify({}))}`
				});
			},
			
			// 点击头像修改
			async changeAvatar() {
				if (!this.$store.state.loginStatic) {
					// 跳转到登录页面并记录来源
					const currentUrl = '/pages/tabbar/my/index';
					uni.navigateTo({
						url: `/pages/login/index?source_url=${encodeURIComponent(currentUrl)}&source_params=${encodeURIComponent(JSON.stringify({}))}`
					});
					return
				}else{
					uni.navigateTo({
						url:`/pages/profile/index`
					});
				}
			},
			
			// 点击昵称修改
			async changeNickname() {
				if (!this.$store.state.loginStatic) {
					// 跳转到登录页面并记录来源
					const currentUrl = '/pages/tabbar/my/index';
					uni.navigateTo({
						url: `/pages/login/index?source_url=${encodeURIComponent(currentUrl)}&source_params=${encodeURIComponent(JSON.stringify({}))}`
					});
					return
				}else{
					uni.navigateTo({
						url:`/pages/profile/index`
					});
				}
			}
		},
	};
</script>


<style scoped>
	.head{
		border-radius:50%;
		border:2px solid #fff;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.head:active {
		transform: scale(0.95);
		opacity: 0.8;
	}
	
	.c-white {
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.c-white:active {
		opacity: 0.8;
	}
</style>